<template>
    <div-row :obj="obj" class="DaiBan">
        <el-tabs>
            <el-tab-pane>
                <h3 class="db_title" slot="label">待办流程<span class="red">({{ todoList.length }})</span></h3>
                <div class="todo_item clearfix" v-for="(item,index) in todoList" :key="index">
                    <div class="avtar_box fl">
                        <img :onerror="defaultImg" :src="item.createrPhoto" alt="">
                    </div>
                    <div class="text_box fr">
                        <h4>{{ item.title }}</h4>
                        <div class="desc clearfix">
                            <span class="fl ">紧急</span>
                            <span class="fr">{{ item.createAgo }}</span>
                        </div>
                    </div>
                </div>
                <span class="more" @click="goRouter">查看更多</span>
            </el-tab-pane>
            <el-tab-pane>
                <h3 class="db_title" slot="label">已办流程<span class="red">({{ total }})</span></h3>
                <div class="todo_item clearfix" v-for="(item,index) in doList" :key="index">
                    <div class="avtar_box fl">
                        <img :onerror="defaultImg" :src="item.createrPhoto" alt="">
                    </div>
                    <div class="text_box fr">
                        <h4>{{ item.title }}</h4>
                        <div class="desc clearfix">
                            <span class="fl">紧急</span>
                            <span class="time fr">{{ item.createAgo }}</span>
                        </div>
                    </div>
                </div>
                <span class="more" @click="goRouter">查看更多</span>
            </el-tab-pane>
        </el-tabs>
    </div-row>
</template>
<script>
import { todoForPC, historic } from '@/api/api'
export default {
    title: 'DaiBan',
    props: {
        obj: {
            type: Object
        }
    },
    data() {
        return {
            todoList: [],
            doList: [],
            total: '',
            defaultImg: 'this.src="' + require('../../../assets/image/avtar.jpg') + '"'
        }
    },
    created() {
        this._getTodo()
        this._getHistoric()
    },
    methods: {
        _getTodo() {
            todoForPC()
                .then((response) => {
                    this.todoList = response.rows
                })
        },
        _getHistoric() {
            const params = {
                'order': 'asc',
                'offset': 10,
                'limit': 10,
                'paramsMap': {},
                'requestParam': {},
                'filter': {},
                'isView': null
            }
            historic(params)
                .then((response) => {
                    this.doList = response.rows
                    this.total = response.total
                })
        },
        goRouter() {
            this.$router.push({ path: '/', params: {}})
        },
        imgEror() {

        }
    }
}
</script>
<style lang="scss" scoped>
    .DaiBan{
        background: #fff;
        height: 300px;
        overflow: auto;
        .el-tabs .el-tab-pane{
            overflow: auto;
        }
        .db_title{
            font-size: 18px;
        }
        .todo_item{
            margin-top: 10px;
            .avtar_box{
                width: 50px;
                img{
                    width: 100%;
                    border-radius: 50%;
                }
            }
            .text_box{
                width: calc(100% - 70px);
                padding-top: 10px;
                h4{
                    font-size: 14px;
                    color: #333;
                    margin-bottom: 10px;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                }
                .desc{
                    span{
                        color: #999;
                    }
                    .time{
                        margin-right: 20px;
                    }
                }
            }
        }
        .more{
            text-align: center;
            padding: 20px 0 10px;
            font-size: 14px;
            color: green;
            display: block;
        }
    }
</style>
